<template>
  <view class="container">
    <HeadNav title="店铺详情" back />
    <view
      class="banner"
      :style="{
        background: detailInfo.storeLogoFileUrl
          ? `url(${detailInfo.storeLogoFileUrl}) no-repeat`
          : '#C0C4CC',
        'background-size': 'cover'
      }"
    >
    </view>

    <view class="filter-bar">
      <!-- <view :class="['filter-btn',index===current?'active':'']" @click="filterBtnClick(index)"
				v-for="(item,index) of tabs" :key="item">
				{{item}}
			</view> -->
      <view
        class="filter-btn"
        :class="{ active: current === 0 }"
        @click="filterBtnClick(0)"
      >
        {{ tabs[0] }}
      </view>
      <view
        v-if="showActivity"
        class="filter-btn"
        :class="{ active: current === 1 }"
        @click="filterBtnClick(1)"
      >
        {{ tabs[1] }}
      </view>
    </view>

    <view class="store-content" v-show="current === 0">
      <view class="content-title">
        <view class="search-icon"></view>
        <text>场地信息</text>
        <view class="linerbg"></view>
      </view>
      <view class="content-item">
        <view class="store-title">
          <uni-icons type="shop" size="24" color="#BB9F5E"></uni-icons>
          {{ detailInfo?.storeName }}
        </view>
        <!-- <view class="store-text">
					<uni-icons type="info" size="18"></uni-icons>
					营业时间：周一~周五 10:00~22:00
				</view> -->
        <view class="store-text">
          <uni-icons type="location" size="18"></uni-icons>
          地址：{{ detailInfo?.address }}
        </view>
        <view class="store-text">
          <uni-icons type="phone" size="18"></uni-icons>
          电话：{{ detailInfo?.phone }}
        </view>
      </view>
    </view>
    <view class="store-content" v-show="current === 1">
      <view class="content-title">
        <view class="search-icon"></view>
        <text>活动</text>
        <view class="linerbg"></view>
      </view>
      <scroll-view
        scroll-y
        class="scroll-height"
        @scrolltolower="getActiveData"
      >
        <view v-if="dataList.length" class="list-bar-bg">
          <view class="list-bar">
            <view
              class="list-item"
              @click="onActivityItem(item.id)"
              v-for="item of dataList"
              :key="item.id"
            >
              <view class="list-item-left">
                <image
                  class="product-item-img"
                  :src="item.coverFileUrl"
                ></image>
              </view>
              <view class="list-item-right">
                <view class="list-item-title list-item-text">
                  {{ item.activityName }}
                </view>
                <view class="list-item-type list-item-text">
                  <text class="item-tag" v-if="item.activityTypeText">{{
                    item.activityTypeText
                  }}</text>
                  <template v-if="item.activityTags">
                    <text
                      class="item-tag item-tag-blue"
                      v-for="tag of tagsFormat(item.activityTags)"
                      :key="tag"
                      >{{ tag }}</text
                    >
                  </template>
                </view>
                <view class="list-item-address list-item-text">
                  <view class="item-content-box">
                    <uni-icons type="location" size="20"></uni-icons>
                    {{ item.address }}
                  </view>
                </view>
                <view class="list-item-storename list-item-text">
                  <view class="item-content-box">
                    <uni-icons type="calendar" size="20"></uni-icons>
                    {{ formatDate(item.startTime, 'YYYY.MM.DD') }}-{{
                      formatDate(item.endTime, 'YYYY.MM.DD')
                    }}
                  </view>
                </view>
                <view class="list-item-storename list-item-text">
                  <view class="item-content-box">
                    <uni-icons type="shop" size="20"></uni-icons>
                    {{ item.storeName }}
                  </view>
                  <view class="item-price"> ￥{{ item.price }} </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <uni-load-more v-if="showLoadMore" :status="pagination.loadingStatus" />
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { storeDetailApi, storeActivityListApi } from '@/api/store'
import { activityListApi } from '@/api/activity'
import { formatDate } from '@/utils/formatTime'
import HeadNav from '@/components/HeadNav'
const current = ref(0)
const tabs = ref(['店铺信息', '活动'])
const detailInfo = ref({})
let storyId = ''
const pagination = reactive({
  page: 0,
  size: 10,
  loadingStatus: '',
  pageLimit: false
})
const showLoadMore = ref(true)
const dataList = ref([])
const showActivity = ref(true)

onLoad(options => {
  console.log('options', options)
  storyId = options.id
  if (options.pageType === 'activity') {
    showActivity.value = false
  } else {
    getActiveData()
  }

  getData()
})

const getData = async () => {
  try {
    uni.showLoading({
      title: '正在加载...'
    })
    const res = await storeDetailApi(storyId)

    detailInfo.value = res.data
    uni.hideLoading()
  } catch (error) {
    uni.hideLoading()
  }
}

const getActiveData = async () => {
  if (pagination.pageLimit) return
  pagination.page++

  const params = {
    pageNum: pagination.page,
    pageSize: pagination.size,
    storeId: storyId
  }

  showLoadMore.value = true
  pagination.loadingStatus = 'loading'
  pagination.pageLimit = true

  try {
    const res = await activityListApi(params)
    dataList.value = dataList.value.concat(res.rows)

    if (dataList.value.length === 0) {
      // 查不到数据
      pagination.pageLimit = true
      pagination.loadingStatus = 'noMore'
    } else if (pagination.page * pagination.size >= res.total) {
      pagination.pageLimit = true
      showLoadMore.value = false
    } else {
      pagination.loadingStatus = 'more'
      pagination.pageLimit = false
    }
  } catch (error) {
    console.log(error)
    pagination.pageLimit = false
    uni.showToast({
      title: '查询活动数据失败，请稍后再试',
      icon: 'error'
    })
  }
}

const onActivityItem = id => {
  uni.navigateTo({
    url: '/pages/match/activity?id=' + id
  })
}

const filterBtnClick = index => {
  if (index !== current.value) {
    current.value = index
  }
}

const tagsFormat = tags => {
  return tags.split('|').filter(part => part && part.trim().length > 0)
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #ededed;
  // padding: 32rpx 0;
  box-sizing: border-box;
  font-family: PingFangSC-Regular, sans-serif;
  height: 100vh;
}

.banner {
  height: 600rpx;
  padding: 0 24rpx;

  image {
    height: 100%;
    width: 100%;
  }

  // .no-image {
  // 	width: 100%;
  // 	height: 100%;
  // 	background-color: $no-image-color;
  // }
}

.filter-bar {
  display: flex;
  gap: 40rpx;
  justify-content: center;
  width: 100%;
  padding-top: 30rpx;
  padding: 30rpx 24rpx 0 24rpx;
  box-sizing: border-box;
  transform: translateY(-60rpx);

  .filter-btn {
    border-radius: 12rpx;
    border: 2rpx solid #fff;
    background-color: #f1f1f1;
    height: 72rpx;
    width: 35%;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12rpx #00000029;
    font-size: 28rpx;

    &.active {
      background-color: #bb9f5e;
      color: #fff;
      border-color: #a78e53;
    }
  }
}

.store-content {
  // margin-top: 32rpx;
  padding: 0 24rpx;

  .content-title {
    padding-bottom: 24rpx;
    font-size: 32rpx;
    font-weight: 600;
    // border-bottom: 2rpx solid #d5d5d4;
    position: relative;
    background-image: url('https://ucp-tcg.com:18001/mc/app/static/search-line.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom;
    display: flex;
    gap: 24rpx;
    align-items: center;
    .search-icon {
      width: 16rpx;
      height: 32rpx;
      background-image: url('https://ucp-tcg.com:18001/mc/app/static/icon_zs.png');
      background-repeat: no-repeat;
      background-size: cover;
    }
    .linerbg {
      position: absolute;
      right: -24rpx;
      bottom: 0;
      width: 220rpx;
      height: 70rpx;
      background-image: url('https://ucp-tcg.com:18001/mc/app/static/linerbg.png');
      background-repeat: no-repeat;
      background-size: contain;
    }
  }

  .content-item {
    // padding: 0 24rpx;
    box-sizing: border-box;

    .store-title {
      font-size: 36rpx;
      font-weight: 600;
      padding: 24rpx 0;
      display: flex;
      gap: 12rpx;
      color: #bb9f5e;
    }

    .store-text {
      font-size: 28rpx;
      line-height: 44rpx;
      display: flex;
      gap: 20rpx;
    }
  }

  .scroll-height {
    // max-height: calc(100vh - 560rpx);
    max-height: calc(46vh + env(safe-area-inset-bottom));
    .list-bar-bg {
      padding: 0 24rpx;
      box-sizing: border-box;
    }
  }

  .list-bar {
    margin-top: 24rpx;
    padding: 24rpx;
    box-sizing: border-box;
    background-color: #fff;

    .list-item {
      display: flex;
      font-family: PingFangSC-Regular, sans-serif;
      margin-bottom: 30rpx;
      background-color: #fff;
      padding: 12rpx;
      padding-left: 24rpx;
      position: relative;
      border: 12rpx solid #eae9e6;
      border-left: 0;
      border-radius: 12rpx;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      background-image: url('https://ucp-tcg.com:18001/mc/app/static/listbg-r.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: right;
      &::before {
        content: '';
        position: absolute;
        top: -12rpx;
        left: 0;
        width: 12rpx;
        height: calc(100% + 24rpx);
        background-color: #d0ccc2;
      }

      .list-item-left {
        width: 36%;
        height: 240rpx;
        background-image: url('https://ucp-tcg.com:18001/mc/app/static/listbg-l.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 16rpx;

        image {
          width: 85%;
          height: 100%;
        }
      }

      .list-item-right {
        flex: 1;
        border: 2rpx solid #f9f7f4;
        border-left: 0;

        .list-item-text {
          line-height: 44rpx;
          font-size: 28rpx;
          // margin-bottom: 16rpx;
        }

        .list-item-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #bda364;
          margin-bottom: 10rpx;
          line-height: normal;
        }

        .item-tag {
          display: inline-block;
          background-color: #d16a5a;
          color: #fff;
          padding: 6rpx;
          margin-right: 10rpx;
          max-width: 180rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          &.item-tag-blue {
            background-color: #3a78ae;
          }
        }

        .item-content-box {
          display: flex;
          align-items: center;
          gap: 8rpx;
        }

        .list-item-storename {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .item-price {
          font-size: 24rpx;
          color: #cbb06f;
        }
      }
    }
  }
}
</style>
